<template>
        <div id='index'>
            <mt-swipe>
  <mt-swipe-item><img src="../assets/img/100.jpg"></mt-swipe-item>
  <mt-swipe-item><img src="../assets/img/101.jpg"></mt-swipe-item>
  <mt-swipe-item><img src="../assets/img/102.jpg"></mt-swipe-item>
  <mt-swipe-item><img src="../assets/img/103.jpg"></mt-swipe-item>
</mt-swipe>
<div class="newsList">
  <mt-cell
  title="最新新闻"
  to="/news"
  is-link
  value="查看更多">
</mt-cell>
<mt-cell v-for="(item,index) in newsList.slice(0,4)" :key='index'  :title="item.title" class="mylist" >
  <img slot="icon" v-lazy="`http://localhost:3000/${item.imgObject.filename}`" width="100" height="100">
</mt-cell>
</div>
 <mt-cell
  title="推荐好物"
  to="/production"
  is-link
  value="查看更多">
</mt-cell>
<div class="production">
 
<ul class="productionlist">
  <li v-for="(item,index) in production" :key='index'>
  <img slot="icon" v-lazy="`http://localhost:3000/${item.img.filename}`" width="150" height="150">
  <div class="price"><i>￥</i><em style="fontSize:20px">{{item.price}}</em></div>
  <p class="overText">{{item.name}}</p>
  <mt-button  type="danger" size="small" >加入购物车</mt-button>
  </li>
</ul>
</div>


        </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["newsList", "production"])
  },
  methods: {
    ...mapActions(["getNewsList", "getProduction"])
  },
  created() {
    this.getNewsList();
    this.getProduction();
  }
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.mylist .mint-cell-title .mint-cell-text {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mint-header .is-fixed {
  top: 0;
  right: 0;
  left: 0;
  position: fixed;
  z-index: 10;
}
.mint-swipe {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
  }
}
.productionlist {
  list-style-type: none;
  overflow: hidden;
  width: 100%;
}
li {
  float: left;
  width: 38%;
  border: 1px solid #eeeeee;
  padding: 21px;
}
.price{
color:red;
font-size:16px;
font-family:'Verdana';
}
.overText {
  height: 40px;
  width: 100%;
  overflow: hidden;
  white-space: wrap;
  text-overflow: ellipsis;
  margin: 15px 0 10px 0;
}
</style>

